<!--eslint-disable-->
<template>
    <div class="line-chart"></div>
</template>

<script>
/* eslint-disable */
import * as echarts from 'echarts';
export default {
  data() {
    return {
      chart: null,
      currentIndex: 0, // 用于记录当前显示的数据索引
      timer: null,     // 用于控制自动轮播的计时器
      xAxisData: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
      data: [10, 20, 30, 25, 35, 11, 23, 44, 22, 11, 22, 22], // 数据
    };
  },
  mounted() {
    this.chart = echarts.init(this.$el);
    const option = {
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(4, 6, 60, 0.7)', // 背景色，黑色透明
      borderColor: '#4878FF',
      textStyle: {
          color: 'white', // 标签颜色
        },
      // formatter: function(params) {
      //   // params是一个数组，包含了每个系列的数据
      //   var tooltipContent = ''; // 初始化数据提示框内容
      //   // 获取X轴标签
      //   var xAxisLabel = params[0].name;
      //   // 遍历每个系列的数据
      //   params.forEach(function(item) {
      //     var seriesName = item.seriesName; // 系列名称
      //     var data = item.data; // 对应的数据值
      //     // 构建该系列的数据提示内容，这里可以根据需要自定义显示方式
      //     var seriesTooltip = seriesName + ': ' + data + '<br>'; 
      //     tooltipContent += seriesTooltip; // 将该系列的内容添加到总的内容中
      //   });
      //   // 构建最终的数据提示框内容
      //   var finalTooltip = xAxisLabel + '<br>' + tooltipContent; 
      //   return '<div style = "display:block;background-color:red;">' + finalTooltip + '</div>';
      // },
    },
    grid: {
      top: '40px',
      left: '15px',
      right: '15px',
      bottom: '5px',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      data: ['一月', '二月', '三月', '四月', '五月','六月','七月','八月','九月','十月','十一月','十二月'],
      axisLabel: {// 设置y轴标签字体颜色和大小
        color: 'white',  // 字体颜色
        fontSize: 14,   // 字体大小
      },
      axisLine: {
        // 设置X轴颜色
        lineStyle: {
          color: 'rgba(255,255,255,0.5)', // X轴颜色
          width:1.5
        },
      },
      formatter: function (value, index) {
            // 根据currentIndex确定当前月份的标签样式
            const color = index === this.currentIndex ? 'red' : 'white';
            const fontSize = index === this.currentIndex ? 16 : 14;
            return `{a|${value}}\n{b|数据${index + 1}}`.replace('{a}', `{color:${color};fontSize:${fontSize}}`).replace('{b}', `{color:${color};fontSize:${fontSize}}`);
      },
    },
    yAxis: [
      {
        type: 'value',
        name: '单位（万元）',
        nameLocation: 'end',
        nameTextStyle: {
          color: 'white',
          fontSize: 14,   // 字体大小
        },
        axisLabel: {// 设置y轴标签字体颜色和大小
          color: 'white',  // 字体颜色
          fontSize: 14,   // 字体大小
        },
        splitLine: {
          show: true,     // 显示分隔线
          lineStyle: {
            color: 'rgba(250,106,133,0.5)', // 分隔线颜色
            width: 1,      // 分隔线宽度
            type: 'dashed' // 分隔线类型（实线、虚线等）
          }
        },
        axisLine: {
          // 设置Y轴颜色
          show: true, 
          lineStyle: {
            color: 'rgba(250,106,133,0.5)', // Y轴颜色
            width: 2
          },
        },
        // data: ['0', '100', '200', '300', '400'], // 设置Y轴的标签数据
        max: 4000, // 设置Y轴最大值
        min: 0,   // 设置Y轴最小值
        splitNumber: 4, // 设置分段数，将Y轴等分成5段
      },
      {
        type: 'value',
        name: '单位（笔）',
        nameLocation: 'end',
        nameTextStyle: {
          color: 'white',
          fontSize: 14,   // 字体大小
        },
        axisLabel: {// 设置y轴标签字体颜色和大小
          color: 'white',  // 字体颜色
          fontSize: 14,   // 字体大小
        },
        splitLine: {
          show: true,     // 显示分隔线
          lineStyle: {
            color: 'rgba(138,232,195,0.5)', // 分隔线颜色
            width: 1,      // 分隔线宽度
            type: 'dashed' // 分隔线类型（实线、虚线等）
          }
        },
        axisLine: {
          // 设置Y轴颜色
          show: true, 
          lineStyle: {
            color: 'rgba(138,232,195,0.5)', // Y轴颜色
            width: 2,
          },
        },
        // data: ['0', '100', '200', '300', '400'], // 设置Y轴的标签数据
        max: 500, // 设置Y轴最大值
        min: 0,   // 设置Y轴最小值
        splitNumber: 4, // 设置分段数，将Y轴等分成5段
      },
    ],
  
        series: [
          {
            name: '解款金额',
            type: 'line',
            data: [130, 320, 330, 253, 335,131,323,134,223,113,232,232],
            yAxisIndex: 0,
            itemStyle: {
              color: '#FA6A85',
            },
           
          },
          {
            name: '解款笔数',
            type: 'line',
            data: [225, 125, 103, 254, 320,0,22,0,223,33,355,211],
            yAxisIndex: 1,
            itemStyle: {
              color: '#8AE8C3',
            },
          },

        ],
      };
  
      this.chart.setOption(option);
      // 启动自动轮播
    this.startAutoPlay();

    },
    beforeDestroy() {
      if (this.chart) {
        this.chart.dispose();
      }
    },
    methods: {
      startAutoPlay() {
      this.timer = setInterval(() => {
        // 计算下一个数据位置
        this.currentIndex = (this.currentIndex + 1) % this.xAxisData.length;
        // 使用dispatchAction触发数据轮播
        this.chart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: this.currentIndex,
        });
      }, 3000); // 3秒自动轮播一次
    },
    }
  };
  </script>
  
  <style scoped>
  .line-chart {
    position: absolute;
    display: block;
    left: 0px;
    top: 0px;
    width: 100%;
    height: calc(100% - 45px);
  }
  </style>
  